<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>购物车</title>
    <script src="js/vue-2.6.10.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        .cart {
            width: 600px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
        }
        .item {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        .item img {
            width: 100px;
            height: 100px;
            margin-right: 10px;
        }
        .item-details {
            flex: 1;
        }
        #checkmark {
            width: 20px;
            height: 20px;
        }
        .price {
            color: red;
            font-weight: bold;
        }
        .quantity {
            display: flex;
            align-items: center;
        }
        .quantity button {
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            background-color: #fff;
        }
        .quantity input {
            width: 50px;
            height: 30px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .checkout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .checkout-btn {
            background-color: red;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        .direct-sale {
            width: 40px;
            height: 10px;
            background-color: red;
        }
    </style>
</head>

<body>
<div id="app" class="cart">
    <header class="header">
        <h1>购物车</h1>
    </header>

    <div class="item" v-for="product in products" :key="product.id">
        <img id="checkmark" :src="checkedImage(product)" @click="toggleSelect(product)">
        <img :src="images(product.picture)" alt="">
        <div class="item-details">
            <span class="direct-sale">直营</span>
            <span class="item-title">{{ product.name }}</span>
            <span class="price">¥{{ product.sell_price }}</span>

            <div class="quantity">
                <button @click="decreaseQuantity(product)">-</button>
                <span>X{{ product.number }}</span>
                <button @click="increaseQuantity(product)">+</button>
            </div>
            <span class="guarantee">{{ product.description }}</span>
        </div>
    </div>

    <div class="checkout">
        <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
        <label>全选</label>
        <span class="total">合计: ¥{{ total }}</span>
        <button class="checkout-btn" @click="submitOrder">去结算({{ checkoutCount }})</button>
    </div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            selectAll: false,
            products: [{
                id: 1,
                picture: '1195000845831.jpg',
                isChecked: false,
                number: 1,
                description: '商品介绍',
                sell_price: 100,
                name: '示例商品'
            }],
        },
        created() {
            axios.get('getCar.do')
                .then(result => {
                    console.log('API 返回数据:', result.data);
                    if (Array.isArray(result.data)) {
                        this.products = result.data;
                    } else {
                        console.error('返回的数据不是数组，使用默认数据');
                    }
                })
                .catch(error => {
                    console.error('请求错误:', error);
                    this.products = [];
                });
        },
        methods: {
            images(img_name) {
                return "img/images/productImages/" + img_name;
            },
            checkedImage(product) {
                console.log("checkedImage:", product.isChecked);
                console.log(product.isChecked ? 'checked.png' : 'no-checked.png')
                return 'img/' + (product.isChecked ? 'checked.png' : 'no-checked.png');

            },
            toggleSelect(product) {
                // product.isChecked = !product.isChecked;
                if(product.isChecked){
                    product.isChecked = false;
                }else{
                    product.isChecked = true;
                }
                console.log("toggleSelect:", product.isChecked);
            },
            toggleSelectAll() {
                this.products.forEach(product => {
                    product.isChecked = this.selectAll;
                });
            },
            increaseQuantity(product) {
                product.number++;
            },
            decreaseQuantity(product) {
                if (product.number > 0) {
                    product.number--;
                }
            },
            submitOrder(){
                axios({
                    url:'SubmitOrder.do',
                    data:{
                        'total_price':app.total,
                        'shoppingCars':app.products
                    },
                    method:'post',
                    headers:{'Content-Type': 'application/json'}
                }).then(re=>{
                    console.log(re)
                    if(re.data.length>0){
                        console.log(re.data)
                        window.location.href='订单.jsp'
                    }else{
                        // window.open('login.jsp','_self')
                        window.location.href='login.jsp'

                    }
                })
            }
            // submitOrder: function (){
            //     let  param={
            //         "total_price": this.total,
            //         "shopping_cars":this.products
            //     }
            //     axios.post("submitOrder.do",param,{headers:{'Content-Type': 'application/json'}})
            //         .then(function (result){
            //             //判断结果中是否有数据
            //             if (result.data.length>0){
            //                 //如果添加成功则跳转到首页
            //                 window.location.href="订单.jsp"
            //             }else{
            //                 //反之则跳转到登录页面
            //                 window,location.href="登录.jsp"
            //             }
            //         })
            // }
        }
        ,
        computed: {
            //总价
            total() {
                return this.products.reduce((sum, product) => {

                    return sum + (product.isChecked ? product.sell_price * product.number : 0);
                }, 0);
            },
            checkoutCount() {
                return this.products.filter(product => product.isChecked && product.number > 0).length;
            }
        }
    });
</script>
</body>

</html>
